<template>
  <div class="box">
    <header class="header">
      <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="$router.back()">
        <template #right>
          <van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end"
            theme="dark" @select="selectDown">
            <template #reference>
              <van-icon name="more-o" size="30"/>
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="selectShar"
      />
    </header>
    <div class="content">
      <van-swipe class="my-swipe" :autoplay="time" indicator-color="white">
        <van-swipe-item v-for="(item, index) of banners" :key="index" @click="changeProView(index)">
          <van-image
            :src="item"
            fit="cover"
          />
        </van-swipe-item>
      </van-swipe>
      <van-icon name="play-circle-o" class="icon1" size="40" @click="show = true"/>
      <van-popup v-model="show" @click="show = false">
        <video  ref="vdo" @click.stop controls autoplay width="375" src="https://jvod.300hu.com/vod/product/2c734922-a63d-4c92-b965-0d70d4d65f6b/75f44d6c9d4d4673ab586585d26ca771.mp4"></video>
      </van-popup>
      <span class="br_and">{{this.brand}}</span>
      <span class="cate_gory">{{this.category}}</span>
      <h5>{{this.proname}}</h5>
      <p class="originprice">￥{{originprice}}</p>
    </div>
    <footer>
      <van-goods-action v-if="issale !== 0">
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cartIndex')" :badge="cartsNum" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="0" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          :disabled="true"
          text="商品已下架"
        />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Image as VanImage, ImagePreview, Icon, Popup, Popover, Button, ShareSheet, Toast } from 'vant'
import { getProDetail } from '@/api/detail'
import { addCart, getCartList } from '@/api/carts'
import { mapState, mapMutations } from 'vuex'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(NavBar)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(Icon)
Vue.use(Popup)
Vue.use(Popover)
Vue.use(Button)
Vue.use(ShareSheet)
Vue.use(Toast)
export default {
  data () {
    return {
      title: '',
      proid: '',
      issale: '',
      banners: [],
      time: 3000,
      show: false,
      showPopover: false,
      actions: [
        { text: '首页', icon: 'wap-home-o' },
        { text: '分类搜索', icon: 'search' },
        { text: '我的嗨购', icon: 'user-circle-o' },
        { text: '浏览记录', icon: 'records' },
        { text: '分享', icon: 'share-o' }
      ],
      proname: '',
      brand: '',
      category: '',
      originprice: '',
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  computed: {
    ...mapState({
      cartsNum: state => state.carts.cartsNum
    })
  },
  watch: {
    show (newVal) {
      if (!newVal) {
        this.$refs.vdo.pause() // 暂停
        this.$refs.vdo.currentTime = 0 // 下次播放从头开始
      } else {
        this.$refs.vdo.play() // 播放
      }
    }
  },
  async mounted () {
    this.proid = this.$route.params.proid
    var proDetail = await getProDetail(this.proid)
    this.banners = proDetail.data.data.banners[0].split(',')
    this.proname = proDetail.data.data.proname
    this.brand = proDetail.data.data.brand
    this.category = proDetail.data.data.category
    this.title = proDetail.data.data.proname
    this.issale = proDetail.data.data.issale
    this.originprice = proDetail.data.data.originprice

    // var cartList = await getCartList({
    //   token: localStorage.getItem('token'),
    //   userid: localStorage.getItem('userid')
    // })
    // this.cartsNum = cartList.data.data.length
  },
  methods: {
    ...mapMutations({ // 在当前的组件中生成changeIsLogin函数，实际上就是this.$store.commit('changeIsLogin', false)
      changeCartsNum: 'carts/changeCartsNum' // 按照模块操作
    }),
    changeProView (index) {
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    selectDown (actions) {
      switch (actions.text) {
        case '首页':
          this.$router.push({ name: 'homeIndex' })
          break
        case '分类搜索':
          this.$router.push({ name: 'kindIndex' })
          break
        case '我的嗨购':
          this.$router.push({ name: 'userIndex' })
          break
        case '浏览记录':
          this.$router.push({ name: 'search' })
          break
        case '分享':
          this.showShare = true
          break
      }
    },
    selectShar () {
      this.showShare = true
    },
    // 添加购物车
    async addCart () {
      var res = await addCart({
        token: localStorage.getItem('token'),
        userid: localStorage.getItem('userid'),
        proid: this.proid,
        num: 1
      })
      if (res.data.code === '200') {
        Toast('添加成功')
        getCartList({
          token: localStorage.getItem('token'),
          userid: localStorage.getItem('userid')
        }).then(res => {
          this.changeCartsNum(res.data.data.length)
        })
      } else {
        Toast('添加失败')
      }
    }
  }
}
</script>

<style lang="stylus">
.van-popover
  position absolute
.box
  .content
    .van-image
      height 3.7rem
      width 100%
.icon1
  color red
  position absolute
  top 3.3rem
  left 50%
.br_and
  background-color #EE0A24
  color #fff
  font-weight bold
  margin-left 5px
  padding 0 4px
  font-size: 12px
  line-height: 16px
  border-radius: 2px
.cate_gory
  background-color #1989FA
  color #fff
  font-weight bold
  margin-left 5px
  padding 0 4px
  font-size: 12px
  line-height: 16px
  border-radius: 2px
h5
  padding 0 4px
  font-size: 20px
.originprice
  color #e4393c
  font-size 20px
  font-weight bold
  margin-top 20px
  margin-left 20px
</style>
